<template>
  <div>
    <!--使用draggable组件-->
    <draggable
      v-model="myArray"
      chosenClass="choose"
      forceFallback="true"
      group="people"
      animation="1000"
      @start="start"
      @end="end"
    >
      <transition-group>
        <div class="item" v-for="(item, index) in myArray" :key="index">
          <div class="top clearfix">
            <span class="left">{{ item.name }}</span>
            <span class="right">商品数：{{ item.goodsNum }}</span>
          </div>
          <div class="under">
            <el-button class="btn" icon="el-icon-upload2"></el-button>
          </div>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'home',
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      myArray: [
        {
          name: "双皮奶",
          goodsNum: 0
        },
        {
          name: "小贝",
          goodsNum: 4
        },
        {
          name: "泡芙",
          goodsNum: 0
        },
        {
          name: "脆皮炸鸡",
          goodsNum: 4
        },
        {
          name: "鸡肉卷",
          goodsNum: 3
        },
        {
          name: "肥宅水",
          goodsNum: 4
        }
      ]
    };
  },
  methods: {
    start() {
      this.drag = true;
    },
    end() {
      this.drag = false;
    },
  },
}
</script>

<style scoped>
.clearfix::after,
.clearfix::before {
  content: "";
  display: block;
  clear: both;
}
.body {
  width: 100%;
  height: 100%;
  background-color: skyblue;
}
.top {
  height: 60px;
}
.top .left {
  float: left;
}
.top .right {
  float: right;
}
.item {
  padding: 6px;
  background-color: #fff;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
  position: relative;
}
.btn {
  position: absolute;
  top: -50px;
  right: 5px;
  border: none;
}
.choose {
  border: solid 2px #3089dc;
}
</style>
